<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.bargin {
				width: 500px;
				height: 600px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				border: 5px solid;
				overflow: hidden;
				border-image: linear-gradient(to bottom, rgba(0, 255, 161, 0.5), rgba(0, 0, 0, 0.62)) 1;
			}
			
			.bargin table {
				width: 100%;
				text-align: center;
				font-size: 24px;
				line-height: 54px;
				transition: all .5s ease-in-out;
			}
			
			.bargin table tr {
				transition: all 0.8s ease-in-out;
			}
			
			.bargin table tr th {
				border-bottom: 2px solid;
				border-image: linear-gradient(to right, rgba(190, 176, 78, 0.5), rgba(55, 234, 151, 0.64)) 1;
			}
			
			.bargin table tr td {
				border-bottom: 1px dashed red;
			}
		</style>
	</head>

	<body>
		<div class="bargin">
			<table cellpadding="10" cellspacing="0">
				<tbody>
					<!--<tr>
						<th>姓名</th>
						<th>年龄</th>
					</tr>-->
				</tbody>
			</table>
		</div>
		<script type="text/javascript">
			var info = [{
						name: "胡杭",
						age: 16
					},
					{
						name: "胜明",
						age: 22
					},
					{
						name: "军毅",
						age: 21
					},
					{
						name: "晓华",
						age: 13
					},
					{
						name: "盛聪",
						age: 23
					},
					{
						name: "侦剑",
						age: 32
					},
					{
						name: "红翔",
						age: 25
					},
					{
						name: "超维",
						age: 18
					},
					{
						name: "士琪",
						age: 22
					},
					{
						name: "艳华",
						age: 20
					}
				],
				tb = document.querySelector("tbody"),
				table = document.querySelector("table");
			for(var i = 0; i < info.length; i++) {
				tb.innerHTML += "<tr><td>" + info[i].name + "</td><td>" + info[i].age + "</td></tr>";
			}
			setInterval(function(){
				table.style.transform = "translateY(-75px)";
				table.addEventListener("transitionend",my_transition_end);
					
					
				
				function my_transition_end(){
					table.style.transition = "none";
					tb.appendChild(tb.firstElementChild);
					table.style.transform = "translateY(0px)";
					getComputedStyle(tb).transition;
					table.style.transition = "";
					table.removeEventListener("transitionend",my_transition_end);
				}
			},1000);
			
		</script>
	</body>

</html>